<template>
    <div @scroll="Top" class="contentbox">
        <myselfnav></myselfnav>
        <point></point>
        <div id="section">
            <div class="contentbox">
                <div id="contentboximg">
                    <img src="../assets/1.jpg" alt="">
                    <div id="lineone">
                        <p id="username">{{p.username}}</p>
                        <p id="psw">修改密码</p>
                    </div>
                    <div><span id="vip">普通会员</span>
                    <span id="jingyan">经验值 : 0</span></div>
                    
                    <div class="item">
                        积分累积至
                        <div style="color:#339933"> 180000 </div>可称为银果会员
                    </div>
                </div>
                <div id="linetwo">
                    <div class="twobox">预存款余额 :
                        <div id="t">&emsp;￥0.00</div>
                    </div>
                    <div class="twobox" id="chongzhi">
                        <div>充值</div>
                        <div class="fa fa-angle-right one"></div>
                        <div>交易记录</div>
                        <div class="fa fa-angle-right one"></div>
                    </div>
                </div>
                <div id="linethree">
                    <div class="first">
                        <div class="footerbox">
                            <div>充值卡</div>
                            <div class="fa fa-angle-right one">
                            </div>
                            <div>提货券</div>
                            <div class="fa fa-angle-right one"></div>
                        </div>
                        <div class="it">
                            <div class="box">账户总积分: 0</div>
                            <div class="box">查看历史积分
                                <div class="fa fa-angle-right one"></div>
                            </div>
                        </div>
                        <div class="it" id="dingdan">
                            <div class="car">我的订单</div>
                            <div class="car">购物车</div>
                            <div class="car">地址管理</div>
                            <div class="car">优惠券</div>
                        </div>
                        <div class="it" id="apply">
                            <div class="car" id="last">申请退换货</div>
                            <div class="car" id="tuihuo">退换货记录</div>
                        </div>
                    </div>
                </div>

                <div class="lastline">
                    <p>我的收藏</p>
                    <p class="fa fa-angle-right one"></p>
                </div>
                <div class="lastline">
                    <p>暂无收藏</p>
                    <p></p>
                </div>
            </div>

        </div>
        <div id="fotbox">
            <div class="items">{{p.username}}</div>
            <div class="items" @click="tuichu">退出</div>
            <router-link to="/goodsupload" class="items">触屏版</router-link>
            <div class="items">电脑版</div>
        </div>
        <div id="np">
            <div class="nptext">
                <div class="lineone">
                    <p>All Rights Reserved©2011-2017 </p>
                    <p id="teshu">APP下载</p>
                </div>
                <p>沪ICP备12027781号| 沪公网备 310104031210</p>
                <p>客服电话400-161-1788</p>
            </div>
        </div>
        <div class="six" @touchstart="returntop" v-show="isshow" ref="six">
            <div class="lastpic"><img src="../assets/to-top.png" alt=""></div>
        </div>
    </div>
    </div>
</template>

<script>
import point from "../components/point"
import myselfnav from "../components/myselfnav"
import {Toast} from 'mint-ui'
export default {
    data: function() {
        return {
            pic: [],
            p: {},
            isshow:false
        }
    },
    components: {
        myselfnav,
        point
    },
    methods: {
        Top:function(e){
            // console.log(e.target.scrollTop)
            if(e.target.scrollTop>20){
                this.isshow = true;
            }else{
                this.isshow = false;
            }
        },
        returntop: function() {
            var a = this.$refs.six;
            a.scrollTop = 0;
        },
        tuichu(){
            this.http.post("/api/tuichu")
            .then(res=>{
                if(res.data.err == "0"){
                        Toast({
                            message: res.data.msg,
                            position: 'middle',
                            duration: 1000
                        });
                    }
                location.hash = "/"
            })
        }
    },
    mounted() {
        this.http.post("/api/islogin")
            .then(res => {
                this.p = res.data.isLogin.data;
                // console.log(this.p);
            }),
            this.http.get("/api/requestpic")
                .then(res => {
                    // console.dir(res.data.list);
                    this.pic = res.data.list;
                })
    }
}
</script>

<style scoped>

.contentbox{
    overflow: scroll;
    height: 100vh;
}
.lastpic {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #5B6167;
}

#fotbox {
    width: 100%;
    height: 40px;
    /*border: solid 1px black;*/
    display: flex;
    margin-bottom: 30px;
}

.items {
    width: 25%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: gray;
}

#header-img {
    position: absolute;
    right: 15px;
    top: 10px;
}

#header-img img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

#section {
    margin-top: 44px;
    padding: 13px;
}

#contentboximg {
    height: 130px;
    /*border: solid 1px black;*/
    background-image: url(http://www.guolehui.com.cn/wap_themes/1448459509/images/i/mem-base.jpg);
}

#contentboximg img {
    height: 3rem;
    width: 3rem;
    border-radius: 2rem;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2) inset;
    /*position: absolute;*/
    margin-left: 20px;
    margin-top: 5px;
}

#username {
    margin: 0;
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    margin-left: 14px;
}

#vip {
    height: 12px;
    width: 12px;

    font-size: 12px;
    color: #fff;
    padding: 2px 5px;
    background-color: orange;
    margin-left: 20px;
}

#lineone {
    display: flex;
    justify-content: space-between;

}

p {
    margin: 0;
}

.item {
    color: #fff;
    font-size: 12px;
    display: flex;
    margin-left: 14px;
    margin-top: 5px;
}

#psw {
    color: #0CF;
    font-size: 14px;
    margin-right: 12px;
    
}

/*#jingyan  {
    position: absolute !important;  
    top: 130px;
    right: 30px;
    font-size: 14px;
    /*margin-right: 12px;*/
    /*color: #ccc;*/
/*}*/
#jingyan{
    float: right;
    margin-right: 12px;
    font-size: 14px;
    color: #ccc;
}
#linetwo {
    height: 40px;
    background-color: #f2f2f2;
    margin-top: 15px;
    display: flex;
    line-height: 40px;
    font-size: 12px;
    border: 1px solid #DDD;
    position: relative;
    /*color: #ccc;*/
}

#t {
    color: #339933;
}

.twobox {
    width: 50%;
    /*border: solid 1px black;*/
    display: flex;
    margin-left: 10px;
}

.one {
    line-height: 40px;
    margin: 0 2px;
    font-size: 20px;
}

#chongzhi {
    color: #666;
}

#linethree {
    margin-top: 30px;
    height: 200px;
    border: 1px solid #ddd;
    padding: 0 10px;
    background-color: #f2f2f2;
}

.first {
    /*border: solid 1px #ddd;*/
    height: 200px;
}

.footerbox {
    width: 120px;
    margin: 0 auto;
    height: 40px;
    /*border: solid 1px #ddd;*/
    display: flex;
    line-height: 40px;
    font-size: 14px;
}

.it {
    /*border: solid 1px #ddd;*/
    height: 40px;
    display: flex;
}

.box {
    width: 50%;
    height: 40px;
    /*border: solid 1px black;*/
    font-size: 14px;
    color: #666;
    margin-left: 10px;
    line-height: 40px;
}

#dingdan {
    color: #666;
    /*font-size: 1rem;*/
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
}

.car {
    padding: 0 10px;
    margin: 0 2px;
    background-color: white;
    border: solid 1px #DDD;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    font-size: 3vw;
}

#apply {
    width: 65%;
    margin: 0 auto;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

#last {
    margin-right: 10px;
}

#tuihuo {
    margin-left: 12px;
}

p {
    margin: 0;
}

.lastline {
    width: 80%;
    margin: 0 auto;
    margin-top: 5px;
    height: 20px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
}

#np {
    width: 100vw;
    height: 100px;
}

.lineone {
    display: flex;
    justify-content: space-around;
    height: 20px;
    line-height: 20px;
}

.nptext {
    width: 90vw;
    margin: 0 auto;
    text-align: center;
}

#teshu {
    color: rgb(255, 0, 0);
    font-family: Arial;
    font-size: 17px;
}

.nptext p {
    margin: 0;
    font-size: small;
    color: rgb(102, 102, 102);
}

.six {
    position: fixed;
    bottom: 50px;
    right: 11px;
}

.six img {
    height: 1.5rem;
    padding-top: 0.3rem;
    padding-left: 0.5rem;
    /*text-align: center;*/
}
</style>